import React, { Component } from 'react';
import {Carousel, Card}  from 'antd';
import './ui.less';
class carousel extends Component {
    onChange = (a, b, c) => {
        console.log(a, b, c)
    }
    render() {
        return (
            <div>
               <Card title="文字背景轮播">
                    <Carousel autoplay afterChange={this.onChange} effect="fade" className="wordCarousel">
                        <div><h3>1</h3></div>
                        <div><h3>2</h3></div>
                        <div><h3>3</h3></div>
                        <div><h3>4</h3></div>
                    </Carousel>
                </Card>
                <Card title="图片背景轮播">
                    <Carousel autoplay={true} afterChange={this.onChange} effect="fade" className="imgCarousel">
                        <div><img src="/assets/img/carousel-img/carousel-1.jpg" alt=""/></div>
                        <div><img src="/assets/img/carousel-img/carousel-2.jpg" alt=""/></div>
                        <div><img src="/assets/img/carousel-img/carousel-3.jpg" alt=""/></div>
                    </Carousel>
                </Card>
            </div>
        );
    }
}

export default carousel;